@import './var/light.less';
@import './var/purple.less';
@import './var/dark.less';

@tailwind base;
@tailwind components;
@tailwind utilities;

// shadcn light backup
// :root {
//   --background: 0 0% 100%;
//   --foreground: 222.2 84% 4.9%;

//   --card: 0 0% 100%;
//   --card-foreground: 222.2 84% 4.9%;

//   --popover: 0 0% 100%;
//   --popover-foreground: 222.2 84% 4.9%;

//   --primary: 222.2 47.4% 11.2%;
//   --primary-foreground: 210 40% 98%;

//   --secondary: 210 40% 96.1%;
//   --secondary-foreground: 222.2 47.4% 11.2%;

//   --muted: 210 40% 96.1%;
//   --muted-foreground: 215.4 16.3% 46.9%;

//   --accent: 210 40% 96.1%;
//   --accent-foreground: 222.2 47.4% 11.2%;

//   --destructive: 0 84.2% 60.2%;
//   --destructive-foreground: 210 40% 98%;

//   --border: 214.3 31.8% 91.4%;
//   --input: 214.3 31.8% 91.4%;
//   --ring: 222.2 84% 4.9%;

//   --radius: 0.5rem;
// }

// shadcn dark backup
// .dark {
//   --background: 222.2 84% 4.9%;
//   --background: 205.714, 10%, 14%;
//   --foreground: 210 40% 98%;

//   --card: 222.2 84% 4.9%;
//   --card-foreground: 210 40% 98%;

//   --popover: 222.2 84% 4.9%;
//   --popover-foreground: 210 40% 98%;

//   --primary: 210 40% 98%;
//   --primary-foreground: 222.2 47.4% 11.2%;

//   --secondary: 217.2 32.6% 17.5%;
//   --secondary-foreground: 210 40% 98%;

//   --muted: 217.2 32.6% 17.5%;
//   --muted-foreground: 215 20.2% 65.1%;

//   --accent: 217.2 32.6% 17.5%;
//   --accent-foreground: 210 40% 98%;

//   --destructive: 0 62.8% 30.6%;
//   --destructive-foreground: 210 40% 98%;

//   --border: 217.2 32.6% 17.5%;
//   --input: 217.2 32.6% 17.5%;
//   --ring: 212.7 26.8% 83.9%;
// }
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
 
    --primary: 162.931 94% 24%;
    --primary-foreground: 210 40% 98%;
 
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
 
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
 
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
 
    --radius: 0.5rem;
  }

  .dark {
    --background: 205.714 10% 14%;
    --foreground: 210 40% 98%;
 
    --card: 205.714 10% 14%;
    --card-foreground: 210 40% 98%;
 
    --popover: 205.714 10% 14%;
    --popover-foreground: 210 40% 98%;
 
    --primary: 42.155 98% 53%;
    --primary-foreground: 222.2 47.4% 11.2%;
 
    --secondary: 213.333 10% 18%;
    --secondary-foreground: 210 40% 98%;
 
    --muted: 213.333 10% 18%;
    --muted-foreground: 215 20.2% 65.1%;
 
    --accent: 213.333 10% 18%;
    --accent-foreground: 210 40% 98%;
 
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
 
    --border: 220 2% 28%;
    --input: 213.333 10% 18%;
    --ring: 212.7 26.8% 83.9%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

html {
  --ls-checked-img: url("");
}
html, body {
  background-color: var(--ls-primary-background-color);
  margin: 0;
  @apply w-screen h-screen overflow-hidden;
  &.modal-app {
    background-color: transparent;
  }
  &.agenda3 {
    background-color: #fff;
  }
}
#root {
  @apply w-screen h-screen;
}
// Scroll bar style optimization
*::-webkit-scrollbar {
  background-color: transparent;
}
*::-webkit-scrollbar-corner {
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--ls-tint-text-color);
  border: 5px solid transparent;
  border-radius: 9px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--ls-description-text-color);
}
// hide scroll bar
.hide-scroll-bar {
  &::-webkit-scrollbar {
    display: none;
  }
}

body:not(.agenda3) {
  a {
    color: var(--ls-tertiary-background-color);
    cursor: pointer;
  }
  a:hover {
    color: var(--ls-tertiary-background-color);
    cursor: pointer;
  }
  
  .page-container {
    width: calc(100vw - 90px);
    @apply h-screen;
  }
  /** 单行溢出隐藏 */
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    padding: 4px 10px;
  }
  .sidebar .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
    padding: 2px 10px;
  }

  .singlge-line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bg-primary {
    background-color: var(--ls-primary-background-color);
  }
  .bg-quaternary {
    background-color: var(--ls-quaternary-background-color);
  }
  .title-text {
    color: var(--ls-title-text-color);
  }
  .text {
    color: var(--ls-text-color);
  }
  .description-text {
    color: var(--ls-description-text-color);
  }
  .tint-text {
    color: var(--ls-tint-text-color);
  }
  // ============= calendar start =============
  .tui-full-calendar-popup-container {
    background-color: var(--ls-quaternary-background-color);
    border-color: var(--ls-description-text-color);
  }
  .tui-full-calendar-arrow-left .tui-full-calendar-popup-arrow-fill {
    border-right-color: var(--ls-quaternary-background-color);
  }
  .tui-full-calendar-popup-detail .tui-full-calendar-section-button {
    border-top-color: var(--ls-description-text-color);
  }
  .tui-full-calendar-popup-vertical-line {
    background-color: var(--ls-description-text-color);
  }

  .calendar-popup-detail-content {
    max-height: 200px;
    overflow-y: auto;
    > p {
      white-space: pre-line;
    }
  }
  // ============= calendar end =============
  .check-box {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    box-sizing: border-box;
    vertical-align: middle;
  }
  /* checked border */
  .check-box.checked span {
    content: "";
    box-sizing: border-box;
    display: inline-block;
    width: 6px;
    height: 9px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    position: absolute;
    left: 5px;
    top: 7px;
    transform: translateY(-50%) rotate(45deg);
  }
}
.dark body:not(.agenda3) {
  .tui-full-calendar-weekday-schedule-bullet + .tui-full-calendar-weekday-schedule-title {
    color: var(--ls-title-text-color) !important;
  }
  .tui-full-calendar-month-more {
    background-color: var(--ls-quaternary-background-color) !important;
    border-color: #58595c !important;
    .tui-full-calendar-month-more-title-day {
      color: var(--ls-title-text-color);
    }
    .tui-full-calendar-month-more-title-day-label {
      color: var(--ls-title-text-color);
    }
  }
}
// .dark .tui-full-calendar-weekday-schedule-bullet + .tui-full-calendar-weekday-schedule-title {
//   color: var(--ls-title-text-color) !important;
// }
// .dark .tui-full-calendar-month-more {
//   background-color: var(--ls-quaternary-background-color) !important;
//   border-color: #58595c !important;
//   .tui-full-calendar-month-more-title-day {
//     color: var(--ls-title-text-color);
//   }
//   .tui-full-calendar-month-more-title-day-label {
//     color: var(--ls-title-text-color);
//   }
// }




// .dark {
//   filter: invert(1) hue-rotate(180deg);
// }
// .dark .mask {
//   filter: invert(1) hue-rotate(180deg);
// }




.hide {
  display: none;
}


// .ant-popover .ant-popover-inner {
//   padding: 0 !important;
// }